<template>
	<view class="container" v-if="!loading">
		<view class="main">
			<view class="nav">
				<view class="header">
					<view class="left" v-if="orderType == 'takein'">
						<view class="store-name">
							<text>{{ store.name }}</text>
						</view>
					</view>
					<view class="left overflow-hidden" v-else>
						<view class="d-flex align-items-center overflow-hidden">
							<image src="/static/images/order/location.png" style="width: 30rpx; height: 30rpx"
								class="mr-10"></image>
							<view class="font-size-extra-lg text-color-base font-weight-bold text-truncate">
								{{address}}
							</view>
						</view>
						<view class="font-size-sm text-color-assist overflow-hidden text-truncate">
							由<text class="text-color-base" style="margin: 0 10rpx">
								{{address}}</text>配送
						</view>
					</view>
				</view>
			</view>
			<view class="goods_category">
				<view class="VerticalBox">
					<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
						style="height:calc(100vh - 220upx)">
						<view class="cu-item" :class="index==tabCur?'text-green cur':''"
							v-for="(item,index) in GoodsVoList" :key="index" @tap="TabSelect" :data-id="index">
							{{item.categoryName}}
						</view>
					</scroll-view>
					<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 220upx)"
						:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
						<view class="padding-top padding-lr" v-for="(item1,index1) in GoodsVoList" :key="index1"
							:id="'main-'+index1">
							<view class="cu-bar solid-bottom bg-white">
								<view class="action">
									<text class="cuIcon-title text-green"></text>{{item1.categoryName}}
								</view>
							</view>
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(item2,index2) in GoodsVoList[index1].goodsVos"
									:key="index2">
									<view class="goods">
										<image mode="aspectFit" class="image" :src="`${imgsrc}${item2.goodsImg}`">
											<view class="right">
												<text class="goods-name">{{item2.goodsName}}</text>
												<text class="goods-desc">{{item2.goodsDesc}}</text>
												<view class="price_and_action">
													<text class="price">￥{{ item2.goodsPrice }}</text>
													<view class="btn-group">
														<button type="primary" class="btn property_btn"
															hover-class="none" size="mini"
															@tap="showGoodDetailModal(item2)">
															选规格
														</button>
													</view>
												</view>
											</view>

									</view>

								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="cart-box" v-if="cart.length > 0">
			<view class="mark">
				<image src="/static/images/menu/cart.png" class="cart-img" @tap="openCartPopup"></image>
				<view class="tag">{{ getCartGoodsNumber }}</view>
			</view>
			<view class="price">￥{{ getCartGoodsPrice }}</view>
			<button type="primary" class="pay-btn" @tap="toPay">
				去结算
			</button>
		</view>
		<modal :show="goodDetailModalVisible" class="good-detail-modal" color="#5A5B5C" width="90%" custom
			padding="0rpx" radius="12rpx">
			<view class="cover">
				<image v-if="good.goodsImg" :src="`${imgsrc}${good.goodsImg}`" class="image"></image>
				<view class="btn-group">
					<!-- <image src="/static/images/menu/share-good.png"></image> -->
					<image src="/static/images/menu/close.png" @tap="closeGoodDetailModal"></image>
				</view>
			</view>
			<scroll-view class="detail" scroll-y>
				<view class="wrapper">
					<view class="basic">
						<view class="name">{{ good.goodsName }}</view>
						<view class="tips">{{ good.goodsDesc }}</view>
					</view>
					<view class="properties">
						<view class="property" v-for="(goodSkuitem, index) in skuData" :key="index">
							<view class="title">
								<text class="name">{{ goodSkuitem.name }}</text>
							</view>
							<view class="values">
								<view class="value" v-for="(value, key) in goodSkuitem.data" :key="key"
									:class="{'default': value.is_default==1}" @tap="changePropertyDefault(index, key)">
									{{ value.value }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="action">
				<view class="left">
					<view class="price">￥{{ good.goodsPrice }}</view>
					<view class="props" v-if="getGoodSelectedProps(good)">
						{{ getGoodSelectedProps(good) }}
					</view>
				</view>
				<view class="btn-group">
					<button type="default" plain class="btn" size="mini" hover-class="none" @tap="handlePropertyReduce">
						<view class="iconfont iconsami-select"></view>
					</button>
					<view class="number">{{ good.number }}</view>
					<button type="primary" class="btn" size="min" hover-class="none" @tap="handlePropertyAdd">
						<view class="iconfont iconadd-select"></view>
					</button>
				</view>
			</view>
			<view class="add-to-cart-btn" @tap="handleAddToCartInModal()">
				<view>加入购物车</view>
			</view>
		</modal>
		<popup-layer direction="top" :show-pop="cartPopupVisible" class="cart-popup" >
			<template slot="content">
				<view class="top">
					<text @tap="handleCartClear">清空</text>
				</view>
				<scroll-view class="cart-list" scroll-y>
					<view class="wrapper" style="margin-bottom: 250rpx;">
						<view class="item" v-for="(item, index) in cart" :key="index">
							<view class="left">
								<view class="name">{{ item.goodsName }}</view>
								<view class="props">{{ item.sku }}</view>
							</view>
							<view class="center">
								<text>￥{{ item.goodsPrice }}</text>
							</view>
							<view class="right">
								<button type="default" plain size="mini" class="btn" hover-class="none"
									@tap="handleCartItemReduce(index)">
									<view class="iconfont iconsami-select"></view>
								</button>
								<view class="number">{{ item.number }}</view>
								<button type="primary" class="btn" size="min" hover-class="none"
									@tap="handleCartItemAdd(index)">
									<view class="iconfont iconadd-select"></view>
								</button>
							</view>
						</view>

					</view>
				</scroll-view>
			</template>
		</popup-layer>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";

	export default {
		components: {},
		data() {
			return {
				address: "茶坊小舍",
				loading: true,
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				GoodsVoList: {},
				imgsrc: this.$url,
				cart: [],
				goodDetailModalVisible: false, //是否饮品详情模态框
				good: {},
				skuData: [],
				showSkuData: "",
				sku: "",
				goods: {},
				cartPopupVisible: false,
			};
		},
		async onLoad() {
			await this.init();
			let list = [{}];
			for (let i = 0; i < 26; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
				list[i].id = i;
			}
			this.list = list;
			this.listCur = list[0];

		},
		watch: {
			cart() {

			},
		},
		computed: {
			...mapGetters(["isLogin"]),

			getCartGoodsNumber() {
				return this.cart.reduce((acc, cur) => acc + cur.number, 0);
			},
			getCartGoodsPrice() {
				return this.cart.reduce(
					(acc, cur) => acc + cur.number * cur.goodsPrice,
					0
				);
			},
		},
		methods: {
			...mapMutations(["SET_ORDER_TYPE"]),
			...mapActions(["getStore"]),
			async init() {
				//页面初始化
				this.loading = true;
				await this.getStore();
				this.getGoodsList();

			},

			getGoodsList() {
				let opt = {
					url: "/goods/getGoodsList",
					method: "get",
				};
				let param = {};
				this.$req.httpRequest(opt, param).then((res) => {
					this.GoodsVoList = res.data.data;
					this.loading = false;
				});
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
			},
			VerticalMain(e) {
				let that = this;
				let tabHeight = 0;
				let tes;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni
							.createSelectorQuery()
							.select("#main-" + this.list[i].id);
						view
							.fields({
									size: true,
								},
								(data) => {
									if (data != null) {
										this.list[i].top = tabHeight;
										tabHeight = tabHeight + data.height;
										this.list[i].bottom = tabHeight;
									}
									// console.log(data);
								}
							)
							.exec();
					}
					this.load = false;
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50;
						this.tabCur = this.list[i].id;
						return false;
					}
				}
			},
			showGoodDetailModal(res1) {
				this.good = {};
				this.good = res1;
				this.sku = "";
				this.good = JSON.parse(JSON.stringify({
					...res1,
					number: 1
				}));

				this.skuData = JSON.parse(res1.goodsSku.skuData);
				this.goodDetailModalVisible = true;
				// this.getSkuData();
			},
			closeGoodDetailModal() {
				this.good = "";
				this.goodDetailModalVisible = false;
			},
			getGoodSelectedProps() {
				return this.showSkuData;
			},
			changePropertyDefault(index, key) {
				this.sku = "";
				this.showSkuData = "";
				//改变默认属性值
				this.skuData[index].data.forEach((value) =>
					this.$set(value, "is_default", 0)
				);
				this.skuData[index].data[key].is_default = 1;
				this.getSkuData();
			},
			getSkuData() {
				this.sku = "";

				let pot = [];
				pot = this.skuData;
				for (let i = 0; i < pot.length; i++) {
					let pot2 = pot[i].data;
					// this.sku += pot[i].name + ":";
					for (let j = 0; j < pot2.length; j++) {
						if (pot2[j].is_default == 1) {
							this.showSkuData += pot2[j].value + "   ";
							this.sku += pot2[j].value + ",";
						}
					}
				}
				this.sku = this.sku.substring(0, this.sku.lastIndexOf(','))
			},
			cartAdd(res, res1, sku) {
				const index = this.cart.findIndex((item) => {
					return item.goodsId === res.goodsId && item.sku === sku;
				});
				if (index > -1) {
					this.cart[index].number += res1;
				} else {
					let newCart = {
						good: "",
					};
					newCart.good = res;
					this.cart.push(res);
				}
			},
			handleAddToCartInModal() {
				this.getSkuData()
				this.good = JSON.parse(JSON.stringify({
					...this.good,
					sku: this.sku
				}));
				const product = Object.assign({}, this.good);

				this.cartAdd(product, this.good.number, this.sku);

				this.closeGoodDetailModal();
			},
			handlePropertyReduce() {
				if (this.good.number === 1) {
					return;
				}
				this.good.goodsNum -= 1;
			},
			handlePropertyAdd() {
				this.good.number += 1;
			},
			handleCartItemAdd(index) {
				console.log(this.cart[index]);
				this.cart[index].number += 1;
			},

			handleCartItemReduce(index) {
				if (this.cart[index].number === 1) {
					this.cart.splice(index, 1);
					this.cartPopupVisible = false;
					return;
				}
				this.cart[index].number -= 1;
			},
			handleCartClear() {
				this.cart = [];
			},
			openCartPopup() {
				this.cartPopupVisible = !this.cartPopupVisible;
			},
			toPay() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: "/pages/login/login"
					});
					return;
				}

				uni.showLoading({
					title: "加载中"
				});
				uni.setStorageSync("cart", JSON.parse(JSON.stringify(this.cart)));

				uni.navigateTo({
					url: "/pages/pay/pay",
				});
				uni.hideLoading();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "~@/pages/menu/menu.scss";

	.current {
		background-color: #ffffff;
		color: $text-color-base;
	}

	.goods_category {
		.VerticalNav.nav {
			width: 200upx;
			white-space: initial;
		}

		.VerticalNav.nav .cu-item {
			width: 100%;
			text-align: center;
			background-color: #fff;
			margin: 0;
			border: none;
			height: 50px;
			position: relative;
		}

		.VerticalNav.nav .cu-item.cur {
			background-color: #f1f1f1;
		}

		.VerticalNav.nav .cu-item.cur::after {
			content: "";
			width: 8upx;
			height: 30upx;
			border-radius: 10upx 0 0 10upx;
			position: absolute;
			background-color: currentColor;
			top: 0;
			right: 0upx;
			bottom: 0;
			margin: auto;
		}

		.VerticalBox {
			display: flex;
		}

		.VerticalMain {
			background-color: #f1f1f1;
			flex: 1;
		}
	}

	.goods {
		display: flex;
		width: 100%;
		margin-bottom: 20rpx;

		.image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 10rpx;
			margin-left: 10rpx;
			border-radius: 8rpx;
		}

		.right {
			display: flex;
			justify-content: center;
			height: 100%;
			flex-wrap: wrap;

			.goods-name {
				width: 250rpx;
				font-size: 30rpx;
				font-weight: 900;
			}

			.goods-desc {
				margin-top: 20rpx;
				width: 250rpx;
				height: 62rpx;
				font-size: $font-size-sm;
				color: $text-color-assist;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.price_and_action {
				margin-top: 20rpx;
				width: 250rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: $font-size-base;
					font-weight: 600;
				}

				.btn-group {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.btn {
						padding: 0 20rpx;
						box-sizing: border-box;
						font-size: $font-size-sm;
						height: 44rpx;
						line-height: 44rpx;

						&.property_btn {
							border-radius: 24rpx;
						}

						&.add_btn,
						&.reduce_btn {
							padding: 0;
							width: 44rpx;
							border-radius: 44rpx;
						}
					}

					.dot {
						position: absolute;
						background-color: #ffffff;
						border: 1px solid $color-primary;
						color: $color-primary;
						font-size: $font-size-sm;
						width: 36rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 100%;
						right: -12rpx;
						top: -10rpx;
					}

					.number {
						width: 44rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
